<template>
  <div class="page-container">
	<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)">刷新</el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog">列显示</el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
		<!--表格显示列界面-->
		<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" 
			@handleFilterColumns="handleFilterColumns"> 
		</table-column-filter-dialog>
	</div>
	<!--表格内容栏-->
	<kt-table :height="350" :data="pageResult" :columns="filterColumns"
		@findPage="findPage"  @handleExam="handleExam">
	</kt-table>
	<!--审核界面-->
	<el-dialog title="用户审核" width="40%" minWidth="800px" :visible.sync="dialogVisible" :close-on-click-modal="false"  class="dialog">
		<el-form :model="dataForm" label-width="20px"  ref="dataForm" :size="size"
			label-position="right" style="margin-left:3%">
            <el-row :gutter="20">
                <el-col :span="8" label="身份证正面">
                    <div class="right">
                        <img :src="dataForm.trueUrl"/>
                    </div>
                </el-col>
                <el-col  :span="8" label="身份证反面">
                    <div class="right">
                        <img :src="dataForm.falseUrl" style="margin-left:60px"/>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col  :span="8" label="手持证件照">
                    <div class="right">
                        <img :src="dataForm.handUrl"/>
                    </div>
                </el-col>
            </el-row>
			<el-row :gutter="20">
                
            </el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button :size="size" @click.native="submitForm" :loading="editLoading">审核通过</el-button>
			<el-button :size="size" type="primary" @click.native="checkFailed">审核失败</el-button>
		</div>
	</el-dialog>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import KtTable from "@/views/Core/KtTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"

export default {
	components:{
		PopupTreeInput,
		KtTable,
		KtButton,
		TableColumnFilterDialog
	},
	data() {
		return {
            //img_url_1:require("../../assets/404_images/404.png"),
			size: 'small',
			filters: {
				remark: null
			},
			columns: [],
			filterColumns: [],
			pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {"pageNum":0,"pageSize":0,"totalSize":0,"totalPages":0,"content":[]},

			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			// 新增编辑界面数据
			dataForm: {
				trueUrl:'',//正面url
				falseUrl:'',//反面url
				handUrl:''//手持照url
			},
		}
	},
	methods: {
		// 获取分页数据
		findPage: function (data) {
			var me = this;
			console.log(this.pageRequest);
			if(data !== null && data !== undefined) {
				me.pageRequest = data
			}
			console.log(me.pageRequest);
			let req = {
				"curPage":me.pageRequest.pageNum,
				"limit":me.pageRequest.pageSize,
				"isDocter":2,
				"isAuth":2
			}
			this.$api.user.findPage(req).then((res) => {
				if(res.code != 200) {
					this.$message({
					message: res.msg,
					type: 'error'
					})
				} else {
					me.pageResult.pageNum = res.page.currPage;
					me.pageResult.pageSize = res.page.pageSize;
					me.pageResult.totalSize = res.page.totalCount;
					me.pageResult.totalPages = res.page.totalPage;
					me.pageResult.content = res.page.list;
					console.log(me.pageResult)
				}
			}).then(data!=null?data.callback:'')
		},
		// 显示审核界面
		handleExam: function (params) {
			var me = this;
			me.operation = false
			me.dataForm = Object.assign({}, params.row)
			let req = {"id":me.dataForm.id}
			debugger;
			this.$api.user.findExamByid(req).then((res) => {
				debugger;
				if(res.code != 200) {
					this.$message({
					message: res.msg,
					type: 'error'
					})
				} else {
					me.dataForm = res.userCard;
					me.dialogVisible = true
				}
			})
		},
		// 审核通过
		submitForm: function () {
			this.$refs.dataForm.validate((valid) => {
				this.$confirm('确认提交吗？', '提示', {}).then(() => {
					let params = Object.assign({}, this.dataForm)
					let req = {
						"userId":params.userId,
						"isAuth":1,
						"remark":null
					}
					debugger;
					this.$api.user.review(req).then((res) => {
						debugger;
						if(res.code == 200) {
							this.$message({ message: '操作成功', type: 'success' })
							this.dialogVisible = false
						} else {
							this.$message({message: '操作失败, ' + res.msg, type: 'error'})
						}
						this.findPage(null)
					})
				})
			})
		},
		//审核失败按钮
		checkFailed: function () {
			this.$refs.dataForm.validate((valid) => {
				this.$confirm('确认提交吗？', '提示', {}).then(() => {
					let params = Object.assign({}, this.dataForm)
					let req = {
						"userId":params.userId,
						"isAuth":2,
						"remark":'aaaaaaaaa'
					}
					debugger;
					this.$api.user.review(req).then((res) => {
						debugger;
						if(res.code == 200) {
							this.$message({ message: '操作成功', type: 'success' })
							this.dialogVisible = false
						} else {
							this.$message({message: '操作失败, ' + res.msg, type: 'error'})
						}
						this.findPage(null)
					})
				})
			})
		},
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},
		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},
		// 处理表格列过滤显示
      	initColumns: function () {
			this.columns = [
				{prop:"id", label:"编号", minWidth:120},
				{prop:"name", label:"用户名称", minWidth:120},
				{prop:"phone", label:"手机号", minWidth:120},
                {prop:"createTime", label:"提交时间", minWidth:120, formatter:this.dateFormat}
			]
			this.filterColumns = JSON.parse(JSON.stringify(this.columns));
      	},
		setType(){
			this.GLOBAL.setType('7');
		}
	},
	created(){
		this.setType();
	},
    mounted() {
        this.initColumns()
		this.findPage()
	}
}
</script>

<style lang="scss" scoped>
  img {
    border-style: none;
    width:300px;
    height:200px;
  }
  .dialog{
      minWidth:800px;
  }
</style>